<template>
    <div>
      <!-- <h1>大首页</h1> -->

    <div class="q1">

        <div class="q2">
            <div class="q3">
                <img :src="img.i" alt="" class="q10">
                <span class="q4">米话呼叫中心</span>
            </div><br>

            <div class="q5"><img :src="img.w" alt=""><router-link to="/shou/shouy" style="color: aliceblue" class="q14">首页</router-link> </div><br>
            <div class="q12"><img :src="img.e" alt=""><router-link to="/shou/qiy" style="color: aliceblue" class="q15">企业管理</router-link></div><br>
            <div style="color: aliceblue" class="q16"><img :src="img.e" alt=""><span>通话统计</span></div><br>
            <div class="q12"><img :src="img.r" alt=""><router-link to="/shou/qxgl" style="color: aliceblue" class="q15">权限管理</router-link></div><br>
        </div>

        <div class="q6">
            <div class="q7">
                <div class="q8">
                    <i class="el-icon-s-fold"></i>
                </div>
                <img :src="img.q" alt="" class="q11">
                <span class="q9">{{ fn }}</span>
            </div>


            <router-view></router-view>
        </div>
    </div>
  </div>
</template>

<script>

import i from '@/assets/f63f3ae157f1fd0058d19df06876027.png'
import q from '@/assets/abaa4bc3c9a5d811a036f56779a3a13.png'
import w from '@/assets/首页图标.png'
import e from '@/assets/企业管理 (1).png'
import r from "@/assets/权限管理.png"
 

export default {
  data() {
    return {
        img:{
            i,
            q,
            w,
            e,
            r
        }

    }
  },
  mounted() {

  },
  methods: {

  },
  computed: {
    fn(){
        return localStorage.getItem('username')
    }
  },
}
</script>
<style lang='less' scoped>
.q1{
    width: 1502px;
    height: 729px;
    position: relative;
    margin: auto
}
.q2{
    width: 200px;
    height: 729px;
    background:rgb(26,35,60);
}
.q3{
    width: 200px;
    height: 60px;
    background: rgb(18,26,44);
    position: relative;
}
.q4{
    font-size: 20px;
    padding-left:20px ;
    position: absolute;
    color: aliceblue;
    right: 27px;
    top: 12px;
}
.q10{
    position: absolute;
    left: 10px;
    top: 3px;
}
.q5{
    font-size: 18px;
    cursor: pointer;
    width: 200px;
    height: 50px;
    // background-color: aqua;
    position: relative;
}
.q6{
    width: 1300px;
    height: 729px;
    // border: 1px black solid;    
    background-color: rgb(247,247,247);
    position: absolute;
    top: 0px;
    left: 201px;
}
a {
  text-decoration: none;
}
.q7{
    border: 1px solid rgb(235 235 236);
    width: 1300px;
    height: 60px;
    position: relative;
    background-color: white;
}
.q8{
    width: 50px;
    height: 60px;
    border: 1px solid rgb(235 235 236);
    position: relative;
}
.el-icon-s-fold {
  font-size: 40px; /* 调整为你需要的大小 */
  position: relative;
  top: 5px;
  left: 3px;
  color: rgb(138,157,168);
}
.q9{
    position: absolute;
    right: 100px;
    top: 15px;
}
.q11{
    position: absolute;
    right: 150px;
    top: 8px;
}
.q5 img{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 5px;
}
.q14{
    position: absolute;
    left: 60px;
    top: 7px;
}
.q12{
    font-size: 18px;
    cursor: pointer;
    width: 200px;
    height: 50px;
    // background-color: aqua;
    // text-align: center;
    position: relative;
}
.q15{
    position: absolute;
    left: 55px;
}
.q12 img{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
}
.q16{
    width: 200px;
    height: 60px;
    // background-color: aqua;
    position: relative;
}
.q16 img {
    position: absolute;
    left: 18px;
    width: 30px;
    height: 30px;
}
.q16 span {
    position: absolute;
    left: 57px;
     font-size: 18px;
}
</style>